<template>
	<view class="content">
		<self-navbar title="留言咨询历史"></self-navbar>
		<!-- 律师是回复/ 管理员可回复可审核 -->
		<view style="flex-grow: 1;">
			<global-notify></global-notify>
			<z-paging ref="paging" :fixed='false' :auto='false' show-refresher-update-time v-model="dataList"
				@query="queryList">

				<u-sticky style="top: 0">
					<view v-if="tabs.length > 1"
						style="background-color: #fff;border-top: 1px solid #F3F5F9;border-bottom: 1px solid #F3F5F9;">
						<u-tabs style="width: 100%" :scrollable='false' :list="tabs" @click="changeTag"></u-tabs>
					</view>
					<view style="background-color: #fff;padding: 8px;border-bottom: 1px solid #F3F5F9;">
						<u-search :clearabled="true" @clickIcon='search' @custom="search" @clear="search" @search='search'
							placeholder="请输入标题内容关键词" v-model="searchKey"></u-search>
					</view>
				</u-sticky>

				<!-- 自定义返回顶部view -->
				<template #backToTop>
					<self-back-to-top ref="backToTop" :current="currentNo" :total="total" />
				</template>

				<view @click="viewDetail(item)" class="listItem" v-for="(item,index) in dataList" :key="index">

					<view class="listItemName">
						<view class="flex">
							{{item.commentTypeLabel}}
							<view class="mL6">
								<u-tag v-if="getStatus(item).label" :text="getStatus(item).label" :type='getStatus(item).type'
									size="mini"></u-tag>
							</view>
						</view>
					</view>
					<view class="listItemInfo">
						<view class="listItemInfoLabel">咨询编号：</view>
						<view class="listItemInfoValue">{{item.code}}</view>
					</view>
					<view class="listItemInfo">
						<view class="listItemInfoLabel">发起时间：</view>
						<view class="listItemInfoValue">{{item.whenCreated}}</view>
					</view>
					<view class="listItemInfo">
						<view class="listItemInfoLabel">咨询标题：</view>
						<view class="listItemInfoValue">{{item.commentTitle}}</view>
					</view>

					<view class="listItemInfo">
						<view class="listItemInfoLabel">咨询内容：</view>
						<view class="listItemInfoValue">
							{{item.commentInfo}}
						</view>
					</view>
				</view>
			</z-paging>

			<u-action-sheet :round='10' :show="showDetailModal" title="咨询详情" @close="()=>{showDetailModal=false;}">
				<slot>
					<view v-if="showDetailModal"
						style="background-color: #F3F5F9; width: 100%;text-align: left; max-height: 60vh; overflow-y: auto;">
						<mcDetail :consultant='current' />
					</view>
				</slot>
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import mcDetail from './mcDetail.vue';
	import {
		toast,
		clearStorageSync,
		getStorageSync,
		useRouter
	} from '@/utils/utils.js'
	import imDetail from './imDetail.vue';
	export default {
		components: {
			mcDetail
		},
		data() {
			return {
				tabs: [],
				selectTab: {},
				systemRoles: [],
				showDetailModal: false,
				defaltAva: require('@/static/images/avatar.png'),
				searchKey: '',
				scrollTop: 0,
				dataList: [],
				currentNo: 0,
				total: 0,
				current: {}
			};
		},
		computed: {
			isAdmin: function() {
				return (this.systemRoles || []).indexOf('admin') >= 0
			},
			hasOperationRole: function() {
				return (this.systemRoles || []).indexOf('OPERATION_MANAGER') >= 0 || (this.systemRoles || []).indexOf(
					'OPERATION') >= 0
			},
		},
		methods: {
			changeTag: function(item) {
				console.log('changeTag', item)
				this.selectTab = Object.assign({}, item)
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
				this.$refs.paging.reload(true);
			},
			getSystemRoles: async function() {
				this.systemRoles = await this.$commonData.getSystemRoles()
			},
			getStatus: function(item) {
				let status = {}
				switch (item.commentStatus) {
					case "APPROVED":
						status = {
							label: "审核通过",
							type: "success"
						}
						break
					case "TO_BE_REVIEWED":
						status = {
							label: "待审核",
							type: "warning"
						}
						break
					case "ISOLATION":
						status = {
							label: "审核隔离",
							type: "error"
						}
						break
				}
				return status
			},
			search: function() {
				this.$refs.paging.reload(true);
			},
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					status: this.selectTab.value,
					icType: 'MC',
					searchKey: this.searchKey
				}
				this.$api.consultationList(params).then(res => {
					if (res.success) {
						let result = res.result || {}
						this.currentNo = pageNo
						this.total = result.maxPage || 0
						// 将请求的结果数组传递给z-paging
						this.$refs.paging.complete(result.data || []);
					} else {
						// 将请求的结果数组传递给z-paging
						toast(res.message)
						this.$refs.paging.complete(false);
					}
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},

			viewDetail(item) {
				this.current = item
				this.showDetailModal = true
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad: function(options) {
			Promise.all([this.getSystemRoles()]).then(() => {
				if (this.isAdmin || this.hasOperationRole) {
					this.tabs = [{
						name: '回复历史',
						value: 'replyHis',
					}, {
						name: '审核历史',
						value: 'auditHis',
					}]
				} else {
					this.tabs = [{
						name: '回复历史',
						value: 'replyHis',
					}]
				}
				this.selectTab = this.tabs[0]
				this.$nextTick(() => {
					this.$refs.paging.reload(true);
				})
			})
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		overflow: hidden;

	}
</style>